extends layout
append scripts
    script.
        document.getElementById("myBtn").onclick = function() { console.log('hello'); };  // 绑定事件的写法真多啊! .on(), .click(), .onclick =
        document.getElementsByTagName('body').onload = checkCookies(); // 这里函数必须加括号, 而下面的必须去掉括号, 因为这里返回的是函数
        document.getElementById('fname').onchange = myFunction;
        // 带 this 的不好在 dom 中操作
        function checkCookies() {
            if (navigator.cookieEnabled == true) { alert("Cookies 可用") }
            else { alert("Cookies 不可用") }
        }
        function myFunction(){
            var x=document.getElementById("fname");
            x.value=x.value.toUpperCase();
        }
        function mOver(obj){ obj.innerHTML="Thank You" }
        function mOut(obj){ obj.innerHTML="Mouse Over Me" }
block content
    //- 不用 dom 的事件触发这样写, 函数带括号, 而且用双引号包围
    p #[button#myBtn 点这里] #[br]
    | 鼠标离开后, 小写变大写: #[input#fname(type="text")]
    p #[#mydiv(onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;") Mouse Over Me] #[br]
    #mydiv1(onmousedown="mOver(this)" onmouseup="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;") Mouse Click Me
    | 鼠标点击会改变底色: #[input(type="text" onfocus="this.style.background='yellow';")]
    //- 可以省略 this, 函数的位置可以直接替换为 js
